<template>
  <div>
    <div id="qqq">
      <div id="qrCode" ref="qrCodeDiv"></div>
      <div style="border:2px solid red;">
        <img :src="imgData" />
      </div>
    </div>
  </div>
</template>

<script>
import QRCode from 'qrcodejs2';
export default {
  name: "qrCode",
  data() {
    return {}
  },
  mounted: function () {
    this.$nextTick(function () {
      this.bindQRCode();
    })
  },
  methods: {
    bindQRCode: function () {
      let url = 'http://xcaipu.cn/'
      new QRCode(this.$refs.qrCodeDiv, {
        text: url,
        width: 200,
        height: 200,
        colorDark: "#333333", // 二维码颜色
        colorLight: "#ffffff", // 二维码背景色
        correctLevel: QRCode.CorrectLevel.L//容错率，L/M/H
      })
      this.createPicture()
    },
    //将二维码=生成图片
    createPicture(url){
      html2canvas(this.$refs.qrCodeDiv,{
        backgroundColor: null,
        width: 200,
        height:200}).then(canvas =>{
        var imgData = canvas.toDataUrl('image/jpeg')
        this.imgData = imgData
      })
    // }原文链接：https://blog.csdn.net/bullcode/article/details/125283126
    }
  }
}
// 原文链接：https://blog.csdn.net/weixin_50241387/article/details/123549095
</script>

<style scoped>
#qqq {
  background-color: rgb(0, 145, 255);
  width: 220px;
  height: 220px;
  margin: 0 auto; /*水平居中*/
  position: relative;
}

#qrCode {
  display: inline-block;
  margin: 0 auto; /*水平居中*/
  position: relative;
  top: 10px;
}

#qrCode img {
  width: 200px;
  height: 200px;
  background-color: #fff;
  padding: 6px;
}
</style>